<template>
    <div class="details" v-loading="loading">
        <div class="ResContent">
            <div class="ResContentRow">
                <div class="ResmoduleOther Resmodule ResmoduleOther1">
                    <span class="titleLeft"> 云服务器 </span>
                    <div class="cloud_echarts" id="cloud_echartsRight_ecs"></div>
                    <div class="cloud_echartsRight">
                        <div class="cloud_echartsRight1">
                            <span
                                class="cloud_echartsRight2"
                            ></span>
                            <span>运行中</span>
                            <p class="cloud_echartsRight5">
                                <span class="cloud_echartsRight6">{{
                                    CloudDetails.costReport.ecsCount || 0
                                }}</span>
                                台
                            </p>
                        </div>
                        <div class="cloud_echartsRight3">
                            <div class="cloud_echartsRight4"></div>
                            <span>已停运</span>
                            <p class="cloud_echartsRight5">
                                <span class="cloud_echartsRight6">0</span>
                                台
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ResmoduleOther Resmodule ResmoduleOther2">
                    <span class="titleLeft"> 高性能服务器 </span>
                    <div class="cloud_echarts" id="cloud_echartsRight_phy"></div>
                    <div class="cloud_echartsRight">
                        <div class="cloud_echartsRight1">
                            <span
                                class="cloud_echartsRight2"

                            ></span>
                            <span>运行中</span>
                            <p class="cloud_echartsRight5">
                                <span class="cloud_echartsRight6">{{
                                    CloudDetails.costReport.phyCount || 0
                                }}</span>
                                台
                            </p>
                        </div>
                        <div class="cloud_echartsRight3">
                            <div class="cloud_echartsRight4"></div>
                            <span>已停运</span>
                            <p class="cloud_echartsRight5">
                                <span class="cloud_echartsRight6">0</span>
                                台
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ResmoduleOther Resmodule ResmoduleOther1">
                    <span class="titleLeft"> 存储 </span>
                    <div class="List_item">
                        <div class="wbj-progress-value">
                            <span>集中式存储（高性能）</span>
                            <span
                                style="
                                    position: relative;
                                    left: 5%;
                                    color: #f08e2e;
                                    font-weight: bold;
                                "
                                >{{ CloudDetails.costReport.romFcgxnCount || 0 }}TB</span
                            >
                        </div>
                        <div class="wbj-storage_box">
                            <div style="width: 30px; height: 30px; float: left">
                                <img
                                    style="width: 100%; height: 100%"
                                    src="../../../assets/image/16.png"
                                    alt=""
                                />
                            </div>
                            <div class="wbj-progress">
                                <div
                                    class="wbj-progress-bar"
                                    :style="`width:${
                                        (1 *
                                            Number(
                                                CloudDetails.costReport.romFcgxnCount ||
                                                    0
                                            )) /
                                        5
                                    }%`"
                                ></div>
                            </div>
                            <div
                                style="
                                    width: 16%;
                                    height: 20px;
                                    position: relative;
                                    left: 5%;
                                    top: 27%;
                                    text-align: right;
                                    padding-right: 5px;
                                "
                            >
                                <!-- 500TB -->
                            </div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                    <div class="List_item">
                        <div class="wbj-progress-value">
                            <span>分布式存储（通用型）</span>
                            <span
                                style="
                                    position: relative;
                                    left: 5%;
                                    color: #3eadf2;
                                    font-weight: bold;
                                "
                                >{{ CloudDetails.costReport.romFbsCount || 0 }}TB</span
                            >
                        </div>
                        <div class="wbj-storage_box">
                            <div style="width: 30px; height: 30px; float: left">
                                <img
                                    style="width: 100%; height: 100%"
                                    src="../../../assets/image/15.png"
                                    alt=""
                                />
                            </div>
                            <div class="wbj-progress">
                                <div
                                    class="wbj-progress-bar"
                                    :style="`width:${
                                        (1 *
                                            Number(
                                                CloudDetails.costReport.romFbsCount || 0
                                            )) /
                                        5
                                    }%;background: linear-gradient(to top right, #3eadf2 0%, #2972e0 100%);`"
                                ></div>
                            </div>
                            <div
                                style="
                                    width: 16%;
                                    height: 20px;
                                    position: relative;
                                    left: 5%;
                                    top: 27%;
                                    text-align: right;
                                    padding-right: 5px;
                                "
                            >
                               <!-- 500TB -->
                            </div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                    <div class="List_item">
                        <div class="wbj-progress-value">
                            <span>集中式存储（通用能）</span>
                            <span
                                style="
                                    position: relative;
                                    left: 5%;
                                    color: #ff5054;
                                    font-weight: bold;
                                "
                                >{{ CloudDetails.costReport.romFcCount || 0 }}TB</span
                            >
                        </div>
                        <div class="wbj-storage_box">
                            <div style="width: 30px; height: 30px; float: left">
                                <img
                                    style="width: 100%; height: 100%"
                                    src="../../../assets/image/17.png"
                                    alt=""
                                />
                            </div>
                            <div class="wbj-progress">
                                <div
                                    class="wbj-progress-bar"
                                    :style="`width:${
                                        (1 *
                                            Number(
                                                CloudDetails.costReport.romFcCount || 0
                                            )) /
                                       5
                                    }%;    background: linear-gradient(to top right, #f68672 0%, #fa6170 100%);`"
                                ></div>
                            </div>
                            <div
                                style="
                                    width: 16%;
                                    height: 20px;
                                    position: relative;
                                    left: 5%;
                                    top: 27%;
                                    text-align: right;
                                    padding-right: 5px;
                                "
                            >
                               <!-- 500TB -->
                            </div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="ResmoduleOther Resmodule">
                    <span class="titleLeft"> 告警事件 </span>
                    <div class="Resalarm">
                        <div class="ResdataBaseOther1 marginBottom10">
                            <div class="titleCircular">
                                <span>严重事件</span>
                            </div>
                            <div class="ResdataBaseNum">
                                <span class="ResdataBaseNum1 fontSizeCol"
                                    >0</span
                                >
                                <br />
                                <div class="ResdataBaseNum3">件</div>
                            </div>
                        </div>
                        <div class="ResdataBaseOther1 marginBottom10">
                            <div class="titleCircular titleCircular1">
                                <span>重要事件</span>
                            </div>
                            <div class="ResdataBaseNum">
                                <span class="ResdataBaseNum2 fontSizeCol"
                                    >0</span
                                >
                                <br />
                                <div class="ResdataBaseNum3">件</div>
                            </div>
                        </div>
                        <div class="ResdataBaseOther1 marginBottom10">
                            <div class="titleCircular">
                                <span>一般事件</span>
                            </div>
                            <div class="ResdataBaseNum">
                                <span class="ResdataBaseNum1 fontSizeCol"
                                    >0</span
                                >
                                <br />
                                <div class="ResdataBaseNum3">件</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ResContentRow">
                <div class="ResContentRowLeft">
                    <div class="ResContentRowLeft1">
                        <div class="Resmodule">
                            <div class="titleLeft">网络</div>
                            <div class="ResNetwork">
                                <div class="ResNetwork1">
                                    <div class="ResNetworkTitle1">1</div>
                                    <div class="ResNetworkTitle3">IP数量</div>
                                </div>
                                <div class="ResNetwork2">
                                    <div class="ResNetworkTitle1">互联网</div>
                                    <div
                                        class="
                                            ResNetworkTitle3
                                            ResNetworkTitleColor2
                                        "
                                    >
                                        <span>{{
                                            CloudDetails.costReport.ipInternetCount || 0
                                        }}</span>
                                        <span class="ResNetworkTitleColor"
                                            >个</span
                                        >
                                    </div>
                                </div>
                                <div class="ResNetwork2">
                                    <div class="ResNetworkTitle1">政务外网</div>
                                    <div
                                        class="
                                            ResNetworkTitle3
                                            ResNetworkTitleColor2
                                        "
                                    >
                                        <span>{{
                                            CloudDetails.costReport.ipZhengwuCount || 0
                                        }}</span>
                                        <span class="ResNetworkTitleColor"
                                            >个</span
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Resmodule Resmodule2">
                            <div class="titleLeft">数据库</div>
                            <div class="ResdataBase">
                                <div class="ResdataBase1">
                                    <div class="titleCircular">
                                        <span>SQL Server</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.dbSqlserverCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBase2">
                                    <div class="titleCircular titleCircular1">
                                        <span> 国产数据库</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum2">{{
                                            CloudDetails.costReport.dbChinaCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Resmodule Resmodule2">
                            <div class="titleLeft">操作系统</div>
                            <div class="ResdataBase">
                                <div class="ResdataBase1">
                                    <div class="titleCircular">
                                        <span>Windows</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.osWindowsCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBase2">
                                    <div class="titleCircular titleCircular1">
                                        <span> Linux</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum2">{{
                                            CloudDetails.costReport.osLinuxCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ResContentRowLeft2">
                        <div class="Resmodule" style="margin-right: 16px">
                            <div class="titleLeft">安全产品</div>
                            <div class="ResdataBase">
                                <div class="ResdataBaseOther1 marginBottom10">
                                    <div class="titleCircular">
                                        <span>虚拟web防火墙</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.safeXnwebfhqCount ||
                                            0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>虚拟防火墙</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum2">{{
                                            CloudDetails.costReport.safeXnfhqCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>虚拟入侵防御</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.safeXnrqfxCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>流量审计</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.safeLlsjCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther1 marginBottom10">
                                    <div class="titleCircular">
                                        <span>防病毒</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.costReport.safeFbdCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>日志审计</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum2">{{
                                            CloudDetails.safeRzsjCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>数据库统计</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.safeSjktjCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                                <div class="ResdataBaseOther2 marginBottom10">
                                    <div class="titleCircular">
                                        <span>安全审计</span>
                                    </div>
                                    <div class="ResdataBaseNum">
                                        <span class="ResdataBaseNum1">{{
                                            CloudDetails.safeAqsjCount || 0
                                        }}</span>
                                        <span class="ResdataBaseNum3">个</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="ResContentRowLeft3">
                            <div class="Resmodule">
                                <div class="titleLeft">资源配额</div>
                                <div class="content2">
                                    <div class="thItem">
                                        <div class="progress-values">50%</div>
                                        <div class="storage_box">
                                            <div class="ellipsis">虚拟CPU</div>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div>
                                            <div
                                                class="ellipsis"
                                                style="text-align: right"
                                            >
                                                120/240核
                                            </div>
                                        </div>
                                    </div>
                                    <div class="thItem">
                                        <div class="progress-value">50%</div>
                                        <div class="storage_box">
                                            <div class="ellipsis">虚拟内存</div>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div>
                                            <div
                                                class="ellipsis"
                                                style="text-align: right"
                                            >
                                                240/480GB
                                            </div>
                                        </div>
                                    </div>
                                    <div class="thItem">
                                        <div class="progress-value">50%</div>
                                        <div class="storage_box">
                                            <div class="ellipsis">
                                                分布式存储
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div>
                                            <div
                                                class="ellipsis"
                                                style="text-align: right"
                                            >
                                                2.41/3.81TB
                                            </div>
                                        </div>
                                    </div>
                                    <div class="thItem">
                                        <div class="progress-value">50%</div>
                                        <div class="storage_box">
                                            <div class="ellipsis">FC块存储</div>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div>
                                            <div
                                                class="ellipsis"
                                                style="text-align: right"
                                            >
                                                2.93/5.86TB
                                            </div>
                                        </div>
                                    </div>
                                    <div class="thItem">
                                        <div class="progress-value">50%</div>
                                        <div class="storage_box">
                                            <div class="ellipsis">SSD存储</div>
                                            <div class="progress">
                                                <div class="progress-bar"></div>
                                            </div>
                                            <div
                                                class="ellipsis"
                                                style="text-align: right"
                                            >
                                                0/0GB
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="ResContentRow1" v-if="false">
                            <div class="titleLeft">运维事件</div>
                            <div class="meteringCharging">
                                <div class="meteringCharging2">
                                    <span
                                        style="
                                            font-size: 10px;
                                            color: #575ca4;
                                            position: absolute;
                                        "
                                        >已处理事件统计(最近一年)</span
                                    >
                                    <!-- <div id="line" :style="{width: '70%', height: '260px'}"></div> -->
                                    <div class="meteringecharts" id="line" ></div>
                                </div>
                                <div class="meteringCharging3">
                                    <li>处理中事件(最近5条)</li>
                                    <div class="tab-content">
                                        <img
                                            src="../../../assets/image/null.png"
                                            alt=""
                                        />
                                        <p
                                            style="
                                                margin-top: -12%;
                                                margin-left: 7%;
                                                text-align: center;
                                            "
                                        >
                                            暂无数据
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ResContentRowRight">
                    <div class="titleLeft">详情信息</div>
                    <div class="Resdetails" v-if="CloudDetails">
                        <div class="Resdetails1">基本信息</div>
                        <div class="ResdetailsContent">
                            <div class="ResdetailsText" style="margin-top: 8px">
                                <span class="ResdetailsText1">系统名称：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.projectname || 0 }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">云服务商：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.supplierName || ""
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">上线时间：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.appdate || "" }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">上云区域：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.cloudUpArea=='1'?'政务外网' :'互联网'
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">业务部门：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.officeName || "" }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">联系人：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.contactsNickName || "" }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">联系电话：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.contactsinfo || ""
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">邮箱：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.email || "" }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">是否信创：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.isXc
                                            ? "信创"
                                            : "非信创"
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">项目介绍：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.introduction || ""
                                    }}
                                </div>
                            </div>
                        </div>
                        <div class="Resdetails1">承建单位</div>
                        <div class="ResdetailsContent">
                            <div class="ResdetailsText" style="margin-top: 8px">
                                <span class="ResdetailsText1">单位名称：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.constunit || "" }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">联系人：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.constcts ||
                                        ""
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">联系方式：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{
                                        CloudDetails.constctsinfo || ""
                                    }}
                                </div>
                            </div>
                            <div class="ResdetailsText">
                                <span class="ResdetailsText1">邮箱：</span>
                                <div class="ResdetailsText2 tipsDiv">
                                    {{ CloudDetails.constemail || "" }}
                                </div>
                            </div>
                        </div>
                        <div class="Resdetails1">系统成员</div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>联系人</th>
                                    <th>联系方式</th>
                                    <th>邮箱</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ CloudDetails.contactsNickName || "" }}</td>
                                    <td>{{ CloudDetails.contactsinfo || "" }}</td>
                                    <td>{{ CloudDetails.email || "" }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="content" v-if="false">
                <div class="titleLeft">资源增速环比同比信息</div>
                <div class="nav-tabs-custom">
                    <ul class="nav-tabs">
                        <li
                            @click="ClickNavTabs(0)"
                            :class="NavTabsChange == 0 ? 'active' : ''"
                        >
                            云服务商
                        </li>
                        <li
                            @click="ClickNavTabs(1)"
                            :class="NavTabsChange == 1 ? 'active' : ''"
                        >
                            高性能
                        </li>
                        <li
                            @click="ClickNavTabs(2)"
                            :class="NavTabsChange == 2 ? 'active' : ''"
                        >
                            存储
                        </li>
                        <li
                            @click="ClickNavTabs(3)"
                            :class="NavTabsChange == 3 ? 'active' : ''"
                        >
                            宿主机
                        </li>
                    </ul>
                    <div class="tab-content tab-content-radius"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getResourcesDate } from "@/api/cloud/cloud";
import echarts from "echarts";
  import request from "@/utils/request";
export default {
    name: "detail",
    components: {},
    props: {},
    data() {
        return {
            NavTabsChange: 0,
            CloudDetails: {
              costReport: {}
            },
            loading: false,
        };
    },
    created() {
        if (this.$route.params.Id) {
            this.loading = true;
            getResourcesDate(this.$route.params.Id).then((res) => {
                this.CloudDetails = res.data;
                console.log(this.CloudDetails);
                this.cloud_echartsRight_ecs(this.CloudDetails.costReport.ecsCount)
                this.cloud_echartsRight_phy(this.CloudDetails.costReport.phyCount)
                this.loading = false;
            });
            // this.getTrend()
        }
    },
    methods: {
      getTrend() {
        request({
            url: "/homepage/user/yunweiTrend",
            method: "get",
          })
          .then((res) => {
            if (res.success) {
              this.line(res)
            }
          })
      },
      line(data) {
          let myChart = this.$echarts.init(document.getElementById('line'))
          let legendData = [],
            series = [];
          for (let key in data.values) {
            legendData.push(key)
            let obj = {
              name: key,
              type: 'line',
              smooth: true,
              data: []
            }
            data.values[key].forEach(item => {
              obj.data.push(item.value)
            })
            series.push(obj)
          }

          let option = option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: legendData
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '10%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: data.trends
            },
            yAxis: {
              type: 'value'
            },
            series
          };
          myChart.setOption(option)
        },

        cloud_echartsRight_ecs(num) {
            var myChart = echarts.init(
                document.getElementById("cloud_echartsRight_ecs")
            );
            var option = {
                title: [
                    {
                        text: num + '台',
                        top: "42%",
                        left: "44%",
                    },
                ],
                legend: {
                    top: "5%",
                    left: "center",
                },
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "70%"],
                        color:'rgb(107,94,224)',
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "10",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: [{ value: num }, { value: 0 }],
                    },
                ],
            };
            myChart.setOption(option);
        },
        cloud_echartsRight_phy(num) {
            var myChart = echarts.init(
                document.getElementById("cloud_echartsRight_phy")
            );
            var option = {
                title: [
                    {
                        text: num + '台',
                        top: "42%",
                        left: "44%",
                    },
                ],
                legend: {
                    top: "5%",
                    left: "center",
                },
                series: [
                    {
                        type: "pie",
                        radius: ["65%", "70%"],
                        avoidLabelOverlap: false,
                        color:'rgb(107,94,224)',
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "10",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: [{ value: num }, { value: 0 }],
                    },
                ],
            };
            myChart.setOption(option);
        },
        ClickNavTabs(num) {
            this.NavTabsChange = num;
        },
    },
};
</script>
<style scoped lang="less">
.details {
    background-color: rgb(239, 242, 245);
    width: 100%;
    // height: calc(100vh - 75px);
    .ResContent {
        width: calc(100% - 30px);
        margin-left: 15px;
        padding-top: 15px;
        .ResContentRow {
            width: 100%;
            overflow: hidden;
            margin-bottom: 15px;
            .ResmoduleOther {
                width: calc(25% - 12px);
                height: 198px;
            }
            .Resmodule2 {
                margin-left: 16px;
            }
            .Resmodule {
                background-color: #ffffff;
                box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                border-radius: 10px;
                float: left;
                position: relative;
                .titleLeft {
                    height: 14px;
                    line-height: 14px;
                    margin: 15px 0 16px 15px;
                    display: inline-block;
                }
                .titleLeft::before {
                    content: "";
                    width: 2px;
                    height: 16px;
                    background-image: linear-gradient(
                        0deg,
                        #ffd227 0%,
                        #d3650a 100%
                    );
                    display: inline-block;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                }
                .cloud_echarts {
                    position: relative;
                    height: 80%;
                    width: 80%;
                    margin: 0 auto;
                    right: 40px;
                    top: -12px;
                    -webkit-tap-highlight-color: transparent;
                    user-select: none;
                }
                .cloud_echartsRight {
                    position: absolute;
                    top: 26%;
                    right: 6%;
                    .cloud_echartsRight1 {
                        text-align: center;
                        color: #8995cb;
                        font-size: 12px;
                        margin-top: 15px;
                        .cloud_echartsRight2 {
                            width: 14px;
                            height: 6px;
                            display: inline-block;
                            background-color: #6b5ee0;
                            border-radius: 3px;
                            position: relative;
                            top: -4px;
                            left: -6px;
                        }
                        .cloud_echartsRight5 {
                            margin: 10px 0 20px;
                            text-align: left;
                            margin-left: 18px;
                            .cloud_echartsRight6 {
                                margin-right: 10px;
                            }
                        }
                    }
                    .cloud_echartsRight3 {
                        text-align: center;
                        color: #8995cb;
                        font-size: 12px;
                        .cloud_echartsRight4 {
                            width: 14px;
                            height: 6px;
                            display: inline-block;
                            background-color: #e7a41e;
                            border-radius: 3px;
                            position: relative;
                            top: -4px;
                            left: -6px;
                        }
                        .cloud_echartsRight5 {
                            margin: 10px 0 20px;
                            text-align: left;
                            margin-left: 18px;
                            .cloud_echartsRight6 {
                                margin-right: 10px;
                            }
                        }
                    }
                }
                .List_item {
                    width: 100%;
                    height: 30px;
                    padding-left: 24px;
                    .wbj-progress-value {
                        display: block;
                        font-size: 12px;
                        color: #6166c1;
                        font-weight: 600;
                        position: relative;
                        top: 60%;
                        right: -33px;
                    }
                    .wbj-storage_box {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        font-size: 12px;
                        color: #6166c1;
                        margin-left: -10px;
                        div {
                            float: left;
                        }
                        .wbj-progress {
                            width: 89%;
                            height: 8px;
                            position: relative;
                            top: 70%;
                            left: 3%;
                            background-color: #e4e6fd;
                            border-radius: 14px;
                            box-shadow: none;
                            border: none;
                            .wbj-progress-bar {
                                width: 0%;
                                background: linear-gradient(
                                    to top right,
                                    #ff6e02 0%,
                                    #f6a525 100%
                                );
                                height: 100%;
                                border-radius: 14px;
                            }
                        }
                    }
                }
                .Resalarm {
                    width: calc(100% - 30px);
                    margin-left: 15px;
                    .ResdataBaseOther1,
                    .ResdataBaseOther2,
                    .ResdataBaseOther3 {
                        box-sizing: border-box;
                        height: 75px;
                        float: left;
                        width: 33%;
                        background-color: rgba(249, 249, 255, 0.6);
                        border-radius: 4px;
                        border: solid 1px #ffffff;
                        text-align: center;
                        .ResdataBaseNum {
                            height: 28px;
                            margin: 0 auto;
                            margin: 12% auto 0;
                            margin-top: 12%;
                            text-align: center;
                            .fontSizeCol {
                                font-size: 18px;
                            }

                            .ResdataBaseNum1 {
                                font-size: 18px;
                                margin-right: 5px;
                                color: #dca022;
                            }
                            .ResdataBaseNum2 {
                                font-size: 18px;
                                margin-right: 5px;
                                color: #6867ce;
                            }
                            .ResdataBaseNum3 {
                                font-size: 12px;
                                color: #b0b2c7;
                                margin-top: 4px;
                            }
                        }
                        .titleCircular {
                            height: 12px;
                            line-height: 12px;
                            margin: 15px 0 16px 4px;
                            display: inline-block;
                            font-size: 12px;
                            color: #4f5481;
                            span {
                                width: 90px;
                                padding-left: 3px;
                            }
                        }
                        .titleCircular::before {
                            content: "";
                            width: 4px;
                            height: 4px;
                            background-image: linear-gradient(
                                    110deg,
                                    #e25350 0%,
                                    #df7e37 50%,
                                    #dba81e 100%
                                ),
                                linear-gradient(#151a3a, #151a3a);
                            background-blend-mode: normal, normal;
                            margin-right: 1px;
                            display: inline-block;
                            border-radius: 50%;
                            position: relative;
                            top: -3px;
                        }
                        .titleCircular1::before {
                            background-image: linear-gradient(
                                    110deg,
                                    #9977ff 0%,
                                    #7947ee 50%,
                                    #5816dd 100%
                                ),
                                linear-gradient(#151a3a, #151a3a);
                        }
                    }
                    .marginBottom10 {
                        margin-bottom: 10px;
                        height: 120px;
                    }
                }
            }
            .ResmoduleOther1 {
                margin-right: 16px;
            }
            .ResmoduleOther2 {
                margin-right: 16px;
            }
            .ResContentRowLeft {
                width: calc(75% - 4px);
                margin-right: 16px;
                float: left;
                height: 739px;
                .ResContentRowLeft1 {
                    width: 100%;
                    height: 224px;
                    margin-bottom: 15px;
                    .Resmodule {
                        width: calc(33.333% - 10.66px);
                        height: 224px;
                        background-color: #ffffff;
                        box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                        border-radius: 10px;
                        float: left;
                        position: relative;
                        .titleLeft {
                            height: 14px;
                            line-height: 14px;
                            margin: 15px 0 16px 15px;
                            display: inline-block;
                        }
                        .titleLeft::before {
                            content: "";
                            width: 2px;
                            height: 16px;
                            background-image: linear-gradient(
                                0deg,
                                #ffd227 0%,
                                #d3650a 100%
                            );
                            display: inline-block;
                            margin-right: 10px;
                            position: relative;
                            top: 3px;
                        }
                        .ResNetwork {
                            width: calc(100% - 30px);
                            margin-left: 15px;
                            .ResNetwork1 {
                                width: 100%;
                                height: 39px;
                                background-color: #f3f5f9;
                                border-radius: 4px;
                                margin-bottom: 10px;
                                .ResNetworkTitle1 {
                                    visibility: hidden;
                                    width: 28%;
                                    display: inline-block;
                                    height: 39px;
                                    line-height: 39px;
                                    color: #4f5481;
                                    text-align: right;
                                    padding-left: 15px;
                                    font-size: 12px;
                                }
                                .ResNetworkTitle3 {
                                    width: 35%;
                                    display: inline-block;
                                    height: 39px;
                                    line-height: 39px;
                                    color: #4f5481;
                                    text-align: right;
                                    padding-left: 15px;
                                    font-size: 12px;
                                }
                            }
                            .ResNetwork2 {
                                width: 100%;
                                height: 39px;
                                background-color: #fbfbff;
                                border-radius: 4px;
                                margin-bottom: 10px;
                                .ResNetworkTitle1 {
                                    width: 28%;
                                    display: inline-block;
                                    height: 39px;
                                    line-height: 39px;
                                    color: #4f5481;
                                    text-align: right;
                                    padding-left: 15px;
                                    font-size: 12px;
                                }
                                .ResNetworkTitle3 {
                                    width: 35%;
                                    display: inline-block;
                                    height: 39px;
                                    line-height: 39px;
                                    text-align: right;
                                    padding-left: 15px;
                                    font-size: 12px;
                                    color: #3eadf2;
                                    .ResNetworkTitleColor {
                                        color: #afb8e1;
                                        margin-left: 4px;
                                    }
                                }
                            }
                        }
                        .ResdataBase {
                            width: calc(100% - 30px);
                            margin-left: 15px;
                            .ResdataBase1 {
                                width: calc(50% - 9px);
                                height: 156px;
                                float: left;
                                background-color: rgba(249, 249, 255, 0.6);
                                border-radius: 4px;
                                border: solid 1px #ffffff;
                                // background-image: url(/workOrderSystem/static/images/server.png);
                                // background-repeat: no-repeat;
                                // background-position: 95% 90%;
                                position: relative;
                                span {
                                    width: 90px;
                                    padding-left: 3px;
                                }
                                .titleCircular {
                                    height: 12px;
                                    line-height: 12px;
                                    margin: 15px 0 16px 4px;
                                    display: inline-block;
                                    font-size: 12px;
                                    display: inline-block;
                                    color: #4f5481;
                                }
                                .titleCircular::before {
                                    content: "";
                                    width: 4px;
                                    height: 4px;
                                    background-image: linear-gradient(
                                            110deg,
                                            #e25350 0%,
                                            #df7e37 50%,
                                            #dba81e 100%
                                        ),
                                        linear-gradient(#151a3a, #151a3a);
                                    background-blend-mode: normal, normal;
                                    margin-right: 1px;
                                    display: inline-block;
                                    border-radius: 50%;
                                    position: relative;
                                    top: -3px;
                                }
                                .ResdataBaseNum {
                                    height: 28px;
                                    /* margin: 12% auto 0; */
                                    margin: 0 auto;
                                    margin-top: 12%;
                                    text-align: center;
                                    .ResdataBaseNum1 {
                                        font-size: 36px;
                                        margin-right: 5px;
                                        color: #dca022;
                                    }
                                    .ResdataBaseNum3 {
                                        font-size: 12px;
                                        color: #b0b2c7;
                                    }
                                }
                            }
                            .ResdataBase2 {
                                float: right;
                                width: calc(50% - 9px);
                                height: 156px;
                                float: left;
                                background-color: rgba(249, 249, 255, 0.6);
                                border-radius: 4px;
                                border: solid 1px #ffffff;
                                position: relative;
                                .titleCircular {
                                    height: 12px;
                                    line-height: 12px;
                                    margin: 15px 0 16px 4px;
                                    display: inline-block;
                                    font-size: 12px;
                                    display: inline-block;
                                    color: #4f5481;
                                }
                                .titleCircular::before {
                                    content: "";
                                    width: 4px;
                                    height: 4px;
                                    background-image: linear-gradient(
                                            110deg,
                                            #e25350 0%,
                                            #df7e37 50%,
                                            #dba81e 100%
                                        ),
                                        linear-gradient(#151a3a, #151a3a);
                                    background-blend-mode: normal, normal;
                                    margin-right: 1px;
                                    display: inline-block;
                                    border-radius: 50%;
                                    position: relative;
                                    top: -3px;
                                }
                                .titleCircular1::before {
                                    background-image: linear-gradient(
                                            110deg,
                                            #9977ff 0%,
                                            #7947ee 50%,
                                            #5816dd 100%
                                        ),
                                        linear-gradient(#151a3a, #151a3a);
                                }
                                .ResdataBaseNum {
                                    height: 28px;
                                    /* margin: 12% auto 0; */
                                    margin: 0 auto;
                                    margin-top: 12%;
                                    text-align: center;
                                    .ResdataBaseNum2 {
                                        font-size: 36px;
                                        margin-right: 5px;
                                        color: #6867ce;
                                    }
                                    .ResdataBaseNum3 {
                                        font-size: 12px;
                                        color: #b0b2c7;
                                    }
                                }
                            }
                        }
                    }
                }
                .ResContentRowLeft2 {
                    width: 100%;
                    height: 213px;
                    margin-bottom: 15px;
                    .Resmodule {
                        width: calc(100%);
                        height: 224px;
                        background-color: #ffffff;
                        box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                        border-radius: 10px;
                        float: left;
                        position: relative;
                        .titleLeft {
                            height: 14px;
                            line-height: 14px;
                            margin: 15px 0 16px 15px;
                            display: inline-block;
                        }
                        .titleLeft::before {
                            content: "";
                            width: 2px;
                            height: 16px;
                            background-image: linear-gradient(
                                0deg,
                                #ffd227 0%,
                                #d3650a 100%
                            );
                            display: inline-block;
                            margin-right: 10px;
                            position: relative;
                            top: 3px;
                        }
                        .ResdataBase {
                            width: calc(100% - 30px);
                            margin-left: 15px;
                            .ResdataBaseOther1,
                            .ResdataBaseOther2,
                            .ResdataBaseOther3 {
                                height: 75px;
                                width: calc(25% - 10px);
                                float: left;
                                background-color: rgba(248, 248, 248, 0.8);
                                border-radius: 4px;
                                border: solid 1px #ffffff;
                                position: relative;
                                .titleCircular {
                                    width: 90px;
                                    height: 12px;
                                    line-height: 12px;
                                    margin: 15px 0 16px 4px;
                                    font-size: 12px;
                                    display: inline-block;
                                    color: #4f5481;
                                }
                                span {
                                    width: 90px;
                                    padding-left: 3px;
                                    // white-space:nowrap;
                                    // overflow:hidden;
                                    // text-overflow:ellipsis;
                                }
                                .titleCircular::before {
                                    content: "";
                                    width: 4px;
                                    height: 4px;
                                    background-image: linear-gradient(
                                            110deg,
                                            #e25350 0%,
                                            #df7e37 50%,
                                            #dba81e 100%
                                        ),
                                        linear-gradient(#151a3a, #151a3a);
                                    background-blend-mode: normal, normal;
                                    margin-right: 1px;
                                    display: inline-block;
                                    border-radius: 50%;
                                    position: relative;
                                    top: -3px;
                                }
                                .ResdataBaseNum {
                                    height: 28px;
                                    /* margin: 12% auto 0; */
                                    margin: 0 auto;
                                    margin-top: -10%;
                                    text-align: center;
                                    .ResdataBaseNum1 {
                                        font-size: 30px;
                                        margin-right: 5px;
                                        color: #dca022;
                                    }
                                    .ResdataBaseNum2 {
                                        font-size: 30px;
                                        margin-right: 5px;
                                        color: #6867ce;
                                    }
                                    .ResdataBaseNum3 {
                                        font-size: 12px;
                                        color: #b0b2c7;
                                        margin-top: 4px;
                                    }
                                }
                            }
                            .ResdataBaseOther2 {
                                margin-left: 9px;
                            }
                            .marginBottom10 {
                                margin-bottom: 10px;
                            }
                        }
                    }
                    .ResContentRowLeft3 {
                        width: 66%;
                        height: 228px;
                        float: left;
                        .Resmodule {
                            width: 100%;
                            margin: 0px;
                            padding: 0px;
                            height: 224px;
                            background-color: #ffffff;
                            box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                            border-radius: 10px;
                            position: relative;
                            .content2 {
                                min-height: 150px;
                                max-height: 200px;
                                margin-right: auto;
                                margin-left: auto;
                                padding-left: 0px;
                                margin-top: -20px;
                                .thItem {
                                    width: 90%;
                                    height: 36px;
                                    margin: 0 auto;
                                    .progress-values {
                                        display: block;
                                        font-size: 12px;
                                        color: #6166c1;
                                        font-weight: 600;
                                        text-align: center;
                                        position: relative;
                                        top: 45%;
                                        right: 0%;
                                    }
                                    .progress-value {
                                        display: block;
                                        font-size: 12px;
                                        color: #6166c1;
                                        font-weight: 600;
                                        // text-align: center;
                                        position: relative;
                                        top: 45%;
                                        right: 47%;
                                    }
                                    .storage_box {
                                        width: 100%;
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 12px;
                                        color: #6166c1;
                                        .ellipsis {
                                            width: 27%;
                                            float: left;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                        .progress {
                                            width: 45%;
                                            height: 8px;
                                            position: relative;
                                            top: 11px;
                                            left: 2px;
                                            float: left;
                                            background-color: #e4e6fd;
                                            border-radius: 14px;
                                            box-shadow: none;
                                            border: none;
                                            .progress-bar {
                                                width: 50%;
                                                background: linear-gradient(
                                                    to top right,
                                                    #6065c0 0%,
                                                    #afb8e1 100%
                                                );
                                                height: 100%;
                                                border-radius: 14px;
                                            }
                                        }
                                        .ellipsis {
                                            width: 25%;
                                            margin-left: 2px;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .ResContentRow1 {
                        margin-top: 12px;
                        width: 100%;
                        float: left;
                        height: 307px;
                        background-color: #ffffff;
                        box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                        border-radius: 10px;
                        margin-bottom: 15px;
                        .titleLeft {
                            height: 14px;
                            line-height: 14px;
                            margin: 15px 0 16px 15px;
                            display: inline-block;
                        }
                        .titleLeft::before {
                            content: "";
                            width: 2px;
                            height: 16px;
                            background-image: linear-gradient(
                                0deg,
                                #ffd227 0%,
                                #d3650a 100%
                            );
                            display: inline-block;
                            margin-right: 10px;
                            position: relative;
                            top: 3px;
                        }
                        .meteringCharging {
                            width: calc(100% - 30px);
                            margin-left: 15px;
                            height: 100%;
                            display: flex;
                            .meteringCharging2 {
                                width: calc(60% - 8px);
                                height: 100%;
                                background-color: transparent;
                                .meteringecharts {
                                    position: relative;
                                    overflow: hidden;
                                    width: 700px;
                                    height: 240px;
                                    padding: 0px;
                                    margin: 30px;
                                    border-width: 0px;
                                }
                            }
                            .meteringCharging3 {
                                width: calc(40% - 8px);
                                height: 100%;
                                background-color: transparent;
                                float: right;
                                li {
                                    font-size: 10px;
                                    color: #575ca4;
                                    list-style: disc;
                                    line-height: 20px;
                                }
                                .tab-content {
                                    position: relative;
                                    overflow: hidden;
                                    width: 440px;
                                    height: 318px;
                                    padding: 0px;
                                    margin: 0px;
                                    border-width: 0px;
                                    img {
                                        width: 94%;
                                        vertical-align: middle;
                                        border: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .ResContentRowRight {
                width: calc(25% - 12px);
                float: right;
                height: 786px;
                background-color: #ffffff;
                box-shadow: 0px 3px 6px 0px rgba(96, 101, 195, 0.27);
                border-radius: 10px;
                .titleLeft {
                    height: 14px;
                    line-height: 14px;
                    margin: 15px 0 16px 15px;
                    display: inline-block;
                }
                .titleLeft::before {
                    content: "";
                    width: 2px;
                    height: 16px;
                    background-image: linear-gradient(
                        0deg,
                        #ffd227 0%,
                        #d3650a 100%
                    );
                    display: inline-block;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                }
                .Resdetails {
                    width: 93%;
                    margin: 0 auto;
                    .Resdetails1 {
                        color: #415465;
                        font-size: 12px;
                    }
                    .ResdetailsContent {
                        // height: 286px;
                        border-radius: 10px;
                        .ResdetailsText {
                            height: 32px;
                            line-height: 32px;
                            font-size: 12px;
                            display:flex;
                            flex-wrap: nowrap;
                            .ResdetailsText1 {
                                display: inline-block;
                                width: 24%;
                                min-width: 70px;
                                background: #f3f3ff;
                                // float: left;
                                color: #778592;
                                text-align: left;
                                padding-left: 9px;
                                // border-radius: 10px 0 0 0;
                            }
                            .ResdetailsText2 {
                                display: inline-block;
                                width: 76%;
                                // float: left;
                                background: #f9f9ff;
                                padding-left: 11px;
                                color: #2f3043;
                                border-radius: 0 10px 0 0;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                    .table {
                        width: 100%;
                        max-width: 100%;
                        margin-bottom: 20px;
                        border: 0;
                        border-top: none;
                        border-bottom: none;
                        thead {
                            tr {
                                background: #ebeef5;
                                th {
                                    text-align: left;
                                    color: #4f5f6f !important;
                                    background: #ebeef5;
                                    font-size: 14px;
                                    font-weight: 800;
                                    height: 36px;
                                    border: 0;
                                    padding-left: 6px;
                                }
                            }
                        }
                        tbody {
                            tr {
                                td {
                                    vertical-align: middle;
                                    font-size: 12px;
                                    height: 42px !important;
                                    color: #4f5f6f !important;
                                    padding-left: 6px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .content {
        min-height: 250px;
        padding-bottom: 120px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        height: auto;
        .titleLeft {
            height: 14px;
            line-height: 14px;
            margin: 15px 0 16px 15px;
            display: inline-block;
        }
        .titleLeft::before {
            content: "";
            width: 2px;
            height: 16px;
            background-image: linear-gradient(0deg, #ffd227 0%, #d3650a 100%);
            display: inline-block;
            margin-right: 10px;
            position: relative;
            top: 3px;
        }
        .nav-tabs-custom {
            margin-bottom: 20px;
            border: none;
            // height: 440px;
            .nav-tabs {
                width: 100%;
                height: 35px;
                padding-left: 0;
                list-style: none;
                box-shadow: none;
                background-color: #fafafa !important;
                font-size: 12px;
                border-bottom: none;
                margin: 0;
                li {
                    min-width: 120px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    border-left: none !important;
                    border-right: none !important;
                    font-size: 14px;
                    color: #333;
                    font-weight: 500;
                    margin-bottom: -1px;
                    margin-right: -1px;
                    float: left;
                    position: relative;
                    display: block;
                    cursor: pointer;
                    background-color: rgb(250, 250, 250);
                }
                li:hover {
                    background-color: rgb(242, 242, 242);
                }
                .active {
                    border-top: 2px solid #485baf !important;
                    background-color: #fff;
                    color: #3b3e8d !important;
                }
            }
            .tab-content {
                box-sizing: border-box;
                width: 100%;
                height: 350px;
                margin-top: 0px;
                background: #fff;
                border: 1px solid #ffffff;
                padding: 15px;
                padding-top: 0px;
                border-radius: 10px;
            }
            .tab-content-radius {
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
            }
        }
    }
}
</style>
